/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Platform
} from 'react-native';

let Dimensions = require('Dimensions');
let {width} = Dimensions.get('window');
let image = require('../../img/avatar_vip.png');
let see = require('../../img/see.png');
let my_image = require('../../img/my_image.jpg');

let icon_cell_rightArrow = require('../../img/icon_cell_rightarrow.png');
export default class HeaderView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*上部分*/}
                {HeaderView.renderTopView()}
                {/*下部分*/}
                {HeaderView.renderBottomView()}
            </View>
        );
    }

    /**--上部分--**/
    static renderTopView() {
        return (
            <View style={styles.topViewStyle}>
                <Image source={my_image} style={styles.leftIconStyle}/>
                <View style={styles.centerViewStyle}>
                    <Text style={{fontSize:18, color:'white', fontWeight:'bold'}}>一直在远行</Text>
                    <Image source={image} style={{width:17, height:17}}/>
                </View>
                {/*--右边的箭头--*/}
                <Image source={icon_cell_rightArrow} style={{width:8, height:13, marginRight:8}}/>
            </View>
        )
    }

    /**--下部分--**/
    static renderBottomView() {
        return (
            <View style={styles.bottomViewStyle}>
                {HeaderView.renderBottomItem()}
            </View>
        )
    }

    static renderBottomItem() {
        // 数组
        let itemArr = [];
        // 数据数组
        let data = [{'number': '1000', 'title': '积分'},
            {'number': '12', 'title': '评价'}, {'number': '50', 'title': '收藏'}];
        // 遍历创建组件装入数组
        for (let i = 0; i < data.length; i++) {
            // 取出单独的数据
            let item = data[i];

            itemArr.push(
                <TouchableOpacity key={i}>
                    <View style={styles.bottomInnerViewStyle}>
                        <Text style={{color:'white'}}>{item.number}</Text>
                        <Text style={{color:'white'}}>{item.title}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        // 返回数组
        return itemArr;
    }
}


const styles = StyleSheet.create({
    container: {
        height: Platform.OS == 'ios' ? 400 : 200,
        backgroundColor: 'rgba(255,96,0,1.0)'
    },

    centerViewStyle: {
        flexDirection: 'row',
        width: width * 0.72
    },

    topViewStyle: {
        flexDirection: 'row',
        marginTop: Platform.OS == 'ios' ? 280 : 80,
        // 设置侧轴的对齐方式
        alignItems: 'center',
        // 设置主轴的对齐方式
        justifyContent: 'space-around'
    },

    leftIconStyle: {
        width: 70,
        height: 70,
        borderRadius: 35,
        borderWidth: 3,
        borderColor: 'rgba(0,0,0,0.2)'
    },

    bottomViewStyle: {
        flexDirection: 'row',
        // 绝对定位
        position: 'absolute',
        bottom: 0
    },

    bottomInnerViewStyle: {
        width: (width / 3) + 1,
        height: 40,
        backgroundColor: 'rgba(255,255,255,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
        borderRightWidth: 1,
        borderRightColor: 'white'
    }
});
